<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    :title="'销售备注设置'"
    :body-style="{ paddingBottom: '40px' }"
    :footer="null"
	:maskClosable="false"
    @update:visible="updateVisible"
    @ok="save"
    @cancel="cancel"
  >
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="[24, 24]">
        <a-col :md="23" :sm="23" :xs="23">
<!-- 			<div class="flex align-center justify-between">
				<span class="fs-16">销售备注列表</span>
				  <a-button type="primary"
				  >
				    <template #icon>
				      <plus-outlined />
				    </template>
				    <span>新建备注</span>
				  </a-button>
			</div> -->
			<vxe-toolbar>
			    <template #buttons>
					<!-- <div class="flex align-center justify-between">
						<span class="fs-16">销售备注列表</span>
						  
					</div> -->
					<a-button type="primary"  @click="insertEvent(-1)" >
						<template #icon>
						  <plus-outlined />
						</template>
						<span>新建备注</span>
					</a-button>
			  </template>
			</vxe-toolbar>
        </a-col>
        <a-col :md="23" :sm="23" :xs="23">
          <vxe-table ref="xTable" border show-overflow keep-source :edit-config="{trigger: 'manual', mode: 'row'}" :data="tableData" >
            <vxe-column type="seq" title="序号" width="60" />
            <vxe-column field="name" title="备注名称" :edit-render="{}" >
				<template #edit="{ row }">
					<vxe-input v-model="row.name" type="text"></vxe-input>
			    </template>
			</vxe-column>
            <vxe-column field="content" title="备注内容" :edit-render="{}" >
              <template #edit="{ row }">
				<vxe-input v-model="row.content" type="text"></vxe-input>
			  </template>
            </vxe-column>
            <vxe-column title="操作">
			  <template #default="{ row }">
					<template v-if="isActiveStatus(row)">
					   <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
					   <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
					 </template>
					 <template v-else>
					   <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
					   <vxe-button @click="deleteRowEvent(row)">删除</vxe-button>
					 </template>
			   </template>
            </vxe-column>
          </vxe-table>
          <div class="margin-top-15">
            <vxe-pager
              size="mini"
              :current-page="tablePage.currentPage"
              :page-size="tablePage.pageSize"
              :total="tablePage.total"
              :layouts="[
                'PrevJump',
                'PrevPage',
                'JumpNumber',
                'NextPage',
                'NextJump',
                'FullJump',
                'Total'
              ]"
              @page-change="handlePageChange"
            />
          </div>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form, message, Modal } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import {PlusOutlined} from '@ant-design/icons-vue';
  import {
    get_note_list,
    delete_note,
    add_note,
    edit_note
  } from '@/api/order/order/jewelry_order';

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    // 编辑数据id
    editData: Object,
    storeId: String
  });

  const emit = defineEmits(['update:visible', 'getNote']);

  // 提交状态
  const loading = ref(false);
  const actionStatus = ref('add');
  const reason = ref({});
  const tablePage = reactive({
    total: 0,
    currentPage: 1,
    pageSize: 10
  });
  const handlePageChange = ({ currentPage, pageSize }) => {
    tablePage.currentPage = currentPage;
    tablePage.pageSize = pageSize;
    getList();
  };
  const xTable = ref(null);
  const edit = ref(true);
  const tableData = ref([]);

  onMounted(() => {
    getList();
  });
  const isActiveStatus = (row) => {
	  const $table = xTable.value
	  if ($table) {
		return $table.isEditByRow(row)
	  }
	}
	const editRowEvent = (row) => {
	  const $table = xTable.value
	  if ($table) {
	    $table.setEditRow(row)
	  }
	}
	const saveRowEvent = (row) => {
		let data = {
			id:row.id,
			name:row.name,
			content:row.content
		}
		if(row.id){
			data.id = row.id;
			edit_note(data).then(res=>{
				getList();
				message.success(res.msg);
			}).catch(e=>{
				message.error(e.message);
			})
		}else{
			  add_note(data).then(res=>{
				  getList();
				  message.success(res.msg);
			  }).catch(e=>{
				  
				  message.error(e.message);
			  })
		}
	}
	const cancelRowEvent = (row) => {
	  const $table = xTable.value
	    if ($table) {
	      $table.clearEdit().then(() => {
	        // 还原行数据
	        $table.revertData(row)
	      })
	    }
	}
	const deleteRowEvent = (row) => {
	  delete_note({id:[row.id]}).then(res=>{
		  getList();
		  message.success(res.msg);
	  }).catch(e=>{
	  	message.error(e.message);
	  })
	}
	const insertEvent = async (row) => {
	  const $table = xTable.value
	  if ($table) {
	    const record = {
	      name: '',
	      content: ''
	    }
	    const { row: newRow } = await $table.insertAt(record, row)
	    await $table.setEditCell(newRow, 'name')
	  }
	}
  
  
  const getList = () => {
    get_note_list({
      page: tablePage.currentPage,
      page_size: tablePage.pageSize
    })
      .then((res) => {
		  console.log(res)
		tablePage.total = res.total;
		tableData.value = res.data;
      })
      .catch((e) => {
        message.error(e);
      });
  };

  const actionOpt = (row, type) => {
    console.log(row, type);
    if (type == 'edit') {
      actionStatus.value = 'edit';
      addShow.value = true;
      reason.value = {
        id: row.id,
        content: row.content
      };
    } else if (type == 'delete') {
      Modal.confirm({
        title: '提示',
        content: '确定删除?',
        maskClosable: true,
        onOk: () => {
          delete_note({ id: row.id })
            .then((res) => {
              getNewList();
            })
            .catch((e) => {
              message.error(e);
            });
        }
      });
    }
  };
  const save = () => {};
  const getNewList = () => {
    tablePage.currentPage = 1;
    tableData.value = [];
    getList();
  };
  const cancel = ()=>{
	  emit('getNote');
  }

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
